import React, { useState } from "react";
import { Toast, NavBar } from "react-vant";
import { Arrow, Like } from "@react-vant/icons";
import { Card, Image, Button, Space } from "react-vant";
import { Stepper, Cell } from "react-vant";

import { useNavigate } from "react-router-dom";
function Gou() {
  const [value9, setValue9] = useState(0);

  const navigate = useNavigate();
  return (
    <div>
      <div style={{position: "fixed", top: "0px", width: "100%", zIndex: 999}}>
        <NavBar title="购票" onClickLeft={() => navigate(-1)} />
      </div>
      <div style={{ display: "flex", justifyContent: "space-around", marginTop: "50px" }}>
        <p
          style={{
            color: "#000",
            width: "40px",
            height: "40px",
            borderRadius: "10px",
            backgroundColor: "#fff",
            textAlign: "center",
            lineHeight: "40px",
          }}
        >
          27
        </p>
        <p
          style={{
            color: "#000",
            width: "40px",
            height: "40px",
            borderRadius: "10px",
            backgroundColor: "#fff",
            textAlign: "center",
            lineHeight: "40px",
          }}
        >
          28
        </p>
        <p
          style={{
            fontWeight: "bold",
            color: "#fff",
            width: "40px",
            height: "40px",
            borderRadius: "10px",
            backgroundColor: "#000",
            textAlign: "center",
            lineHeight: "40px",
          }}
        >
          29
        </p>
        <p
          style={{
            color: "#000",
            width: "40px",
            height: "40px",
            borderRadius: "10px",
            backgroundColor: "#fff",
            textAlign: "center",
            lineHeight: "40px",
          }}
        >
          30
        </p>
        <p
          style={{
            color: "#000",
            width: "40px",
            height: "40px",
            borderRadius: "10px",
            backgroundColor: "#fff",
            textAlign: "center",
            lineHeight: "40px",
          }}
        >
          3
        </p>
      </div>

      <div style={{padding:'0 20px'}}>
        <p>选择你的票</p>
        <>
          <Card round style={{ marginBottom: 20 ,border:'3px solid #000'}}>
            <Card.Cover onClick={() => Toast.info("点击了Cover区域")}>
              <Image src="https://react-vant.3lang.dev/demo_view_1.png" />
            </Card.Cover>
            <Card.Header
              extra={<Arrow />}
              onClick={() => Toast.info("点击了Header区域")}
            >
              封面展示
            </Card.Header>
            <Card.Body onClick={() => Toast.info("点击了Body区域")}>
              卡片内容区域
            </Card.Body>
            <Card.Footer>
              <Space>
                <Button round size="small">
                  更多
                </Button>
                <Button
                  icon={<Like />}
                  round
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                  size="small"
                >
                  ￥299
                </Button>
              </Space>
              <Cell center style={{marginLeft:'70%'}}>
                <Stepper
                  min={0}
                  max={10}
                  value={value9}
                  onChange={(i: any | null) => {
                    setValue9(i);
                  }}
                />
              </Cell>
            </Card.Footer>
          </Card>
        </>
      </div>
      <div style={{padding:'0 20px'}}>
        
        <>
          <Card round style={{ marginBottom: 20 }}>
            <Card.Cover onClick={() => Toast.info("点击了Cover区域")}>
              <Image src="https://react-vant.3lang.dev/demo_view_1.png" />
            </Card.Cover>
            <Card.Header
              extra={<Arrow />}
              onClick={() => Toast.info("点击了Header区域")}
            >
              封面展示
            </Card.Header>
            <Card.Body onClick={() => Toast.info("点击了Body区域")}>
              卡片内容区域
            </Card.Body>
            <Card.Footer>
              <Space>
                <Button round size="small">
                  更多
                </Button>
                <Button
                  icon={<Like />}
                  round
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
                  size="small"
                >
                  ￥299
                </Button>
              </Space>
              <Cell center style={{marginLeft:'70%'}}>
                <Stepper
                  min={0}
                  max={10}
                  value={value9}
                  onChange={(i: any | null) => {
                    setValue9(i);
                  }}
                />
              </Cell>
            </Card.Footer>
          </Card>
        </>
      </div>
      <div style={{display: "flex", justifyContent: "space-between",position:'fixed',bottom:'0',width:'100%',background:'white'}}>
          <p style={{fontWeight: "bold"}}>￥299</p>
          <p onClick={()=>navigate('/dingxiang')} >
            <button style={{width: "100px", height: "30px", background: "orange", color: "white", border: "none", borderRadius: "5px",marginRight:'10px'}}>继续</button>
          </p>
        </div>
    </div>
  );
}

export default Gou;
